<nz-card>
  <form nz-form [nzLayout]="'inline'" class="search__form">
    <nz-row [nzGutter]="8">
      <nz-col nzMd="4" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <input type="text" nz-input placeholder="{{'order_number' | translate}}" [(ngModel)]="q.billCd"
                   name="billCd">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="5" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-input-group nzSearch [nzSuffix]="suffixButton">
              <input type="text" nz-input placeholder="{{'agent' | translate}}" [(ngModel)]="q.username"
                     name="username">
            </nz-input-group>
            <ng-template #suffixButton>
              <button (click)="showUserSelect()" nz-button nzType="default" nzSearch><i
                class="anticon anticon-ellipsis"></i></button>
            </ng-template>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <!--<nz-col nzMd="4" nzSm="24">-->
      <!--<nz-form-item>-->
      <!--<nz-form-label nzFor="user">{{'user' | translate}}</nz-form-label>-->
      <!--<nz-form-control>-->
      <!--<nz-input-group nzSearch [nzSuffix]="suffixButton">-->
      <!--<input type="text" [(ngModel)]="q.agentCd" nz-input name="username">-->
      <!--</nz-input-group>-->
      <!--<ng-template #suffixButton>-->
      <!--<button (click)="showUserSelect()" nz-button nzType="default" nzSearch><i class="anticon anticon-ellipsis"></i></button>-->
      <!--</ng-template>-->
      <!--</nz-form-control>-->
      <!--</nz-form-item>-->
      <!--</nz-col>-->
      <nz-col nzMd="4" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-select nzPlaceHolder="{{'all_brands' | translate}}" nzAllowClear [(ngModel)]="q.brand" name="brand">
              <nz-option [nzLabel]="brand.text" [nzValue]="brand.value" *ngFor="let brand of brands"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>

      <nz-col nzMd="3" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-select nzPlaceHolder="{{'all_status' | translate}}" nzShowSearch nzAllowClear [(ngModel)]="q.status"
                       name="status">
              <nz-option nzValue="nocheck" nzLabel="{{'order-nocheck' | translate}}"></nz-option>
              <nz-option nzValue="checked" nzLabel="{{'order-checked' | translate}}"></nz-option>
              <nz-option nzValue="cancel" nzLabel="{{'order-cancel' | translate}}"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>

      <nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-range-picker name="cdate" [nzFormat]="'yyyy/MM/dd'" [(ngModel)]="q.dateRange"
                             (ngModelChange)="dateChange($event)"></nz-range-picker>
          </nz-form-control>
        </nz-form-item>
      </nz-col>

      <nz-col nzMd="2" nzSm="24">
        <button nz-button type="button" [nzLoading]="http.loading" [nzType]="'primary'" class="mx-sm"
                (click)="st.load(1, q)">{{'search' | translate}}
        </button>
      </nz-col>
    </nz-row>
  </form>
</nz-card>

<simple-table #st
              [columns]="columns"
              [data]="url"
              [ps]="ps"
              [extraParams]="q"
              [resReName]="{ total: 'data.total', list: 'data.rows'}"
              [reqReName]="{pi:'pageNumber', ps: 'pageSize'}"
              toTopInChange
              [showTotal]="true"
              [showPagination]="true"
              [showSizeChanger]="true"
>
  <!--<ng-template st-row="brand" let-item let-index="index">-->
    <!--{{item.brand | brandEnPipe | uppercase}}-->
  <!--</ng-template>-->
</simple-table>



